import React, { Component } from 'react';

class ConditionDemo extends Component {

  constructor(props) {
    super(props)
    this.state = {
      theme: 'black'
    }
  }

  render() {

    let myBtn, myBtn2, myBtn3

    const blackBtn = <button className="btn-black">black btn</button>
    const whiteBtn = <button className="btn-white">white btn</button>

    // if else
    if (this.state.theme === 'black') {
      myBtn = blackBtn
    } else {
      myBtn = whiteBtn
    }

    // 三元运算符
    myBtn2 = this.state.theme === 'black' ? blackBtn : whiteBtn

    // &&
    myBtn3 = this.state.theme === 'black' && blackBtn

    return (
      <div>
        <h4>1. if else</h4>
        {myBtn}
        <h4>2. 三元运算符</h4>
        {myBtn2}
        <h4>3. &&</h4>
        {myBtn3}
      </div>
    );
  }
}

export default ConditionDemo;